<template>
    <div class="content-panel">
        <base-form :fields="fields" v-model="form" ref="formRef" :readonly="!editing" labelWidth="140px"> </base-form>
        <div class="text-center">
            <template v-if="!editing">
                <el-button type="primary" @click="startEdit">编辑</el-button>
                <el-button @click="close">关闭</el-button>
            </template>
            <template v-else>
                <el-button type="primary" @click="doSave">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </template>
        </div>
    </div>
</template>
<script setup>
import https from "@/utils/https";
import { ElMessage } from "element-plus";
import { onMounted } from "vue";
import * as _ from "lodash";

const emits = defineEmits(["close", "change"]);
const props = defineProps({
    item: Object,
    category: Object,
});
const fields = [
    { label: "规则名称", prop: "name", required: true },
    { label: "分类", prop: "categoryId", type: "treeSelect", options: loadCategory, required: true },
    { label: "关联模型", prop: "modelId", type: "select", options: loadModels, required: true },
    {
        label: "报警标题",
        prop: "title",
        required: true,
        remark: "可使用${paramName}来表示参数占位，参数包括工况参数及设备编码__deviceCode、报警时间__alarmTime",
    },
    { label: "报警内容", prop: "content", type: "textarea", remark: "与标题一样可使用相同的参数占位" },
    {
        label: "报警规则",
        prop: "rule",
        type: "textarea",
        required: true,
        placeholder: "请输入报警规则",
        remark: `使用OGNL表达式，比如假设field_开头的为工况字段：<br/>
            field_a > 1：当field_a字段大于1时进行报警<br/>
            field_a == null：当field_a为空时报警<br/>
            field_b == 'test' and field_c == 'aaa'：表示当field_b为test并且field_c为aaa时进行报警<br/>
            field_b == 'test' or field_c == 'aaa'：表示field_b为test或field_c为aaa时进行报警<br/>
            (field_b == 'test' or field_c == 'aaa') and field_a > 1：表示field_b为test或field_c为aaa，并且field_a大于1时报警<br/>
            具体可参考OGNL相关文档`,
    },
    { label: "报警等级", prop: "level", type: "number", min: 0, max: 10 },
    { label: "是否自动关闭", prop: "autoClose", type: "switch" },
    { label: "备注", prop: "remark", type: "textarea" },
    { label: "解决方案", prop: "solution", type: "textarea", rows: 5 },
];

const form = ref({
    level: 3,
    autoClose: true,
    title: "设备(${__deviceCode})于(${__alarmTime})产生***报警",
});
const formRef = ref();
const editing = ref(false);
const bakForm = ref();

onMounted(() => {
    if (props.item) {
        https.get("/manager/alarm-define/detail/" + props.item.id).then((resp) => {
            form.value = resp;
            editing.value = false;
        });
    } else {
        editing.value = true;
        if (props.category) {
            form.value.categoryId = props.category.id;
        }
    }
});

function startEdit() {
    bakForm.value = _.cloneDeep(form.value);
    editing.value = true;
}

function cancel() {
    if (form.value.id) {
        form.value = bakForm.value;
        editing.value = false;
    } else {
        close();
    }
}

function doSave() {
    formRef.value.validate((res) => {
        if (!res) {
            return;
        }

        let params = form.value;
        let fields = params.fields;
        for (var i in fields) {
            var field = fields[i];
            if (!field.code || !field.name) {
                ElMessage.error("属性编码或名称不能为空");
                return;
            }
        }

        https.post("/manager/alarm-define/save", form.value).then((resp) => {
            ElMessage.success("操作成功");
            form.value = resp;
            editing.value = false;
            emits("change");
        });
    });
}

function loadCategory() {
    return https.get("/manager/alarm-category/tree");
}

function loadModels() {
    return https.post("/manager/device-model/query");
}

function close() {
    emits("close");
}
</script>
